import React, { Component, Fragment } from 'react';
import './style.css';
import TodoItem from './TodoItem';
import axios from 'axios'
import Mock from 'mockjs'

class TodoList extends Component {
  constructor(props) {
    //继承父类的构造函数
    super(props);
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleItemDelete = this.handleItemDelete.bind(this);
  }
  componentDidMount(){
    //mock拦截请求
    //Mock.mock('./api/todolist','get',' ')
    //ajax请求
    //axios.get('./api/todolist')
    //  .then(()=>{alert('访问todolist成功')})
    //  .catch(()=>{alert('没能成功访问')});
  }
  render() {
    return (
      <Fragment>
        <p>TodoList组件</p>
        <div>
          <label>输入内容</label>
          <input
            id="insertArea"
            className="input"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button onClick={this.handleBtnClick}>提交</button>
        </div>
        <div>
          <ul ref={(ul)=>{this.ul=ul}}>
            {this.getTodoItem()}
          </ul>
        </div>
      </Fragment>
    )
  }
  getTodoItem(){
    return this.state.list.map((item, index) => {
      return (
        //使用子组件TodoItem,传入item
          <TodoItem
            key={index}
            //父组件传递内容的时候通过属性传递
            content={item}
            index={index}
            //传递一个方法给子组件,handleItemDelete的this绑定到父组件
            //父组件传递某个方法的时候，要调用一次bind做一次this绑定
            deleteItem={this.handleItemDelete}
            ref={(input)=>{this.input=input}}
          />
      )
    })
  }
  handleInputChange(e) {
    const value = e.target.value;
    this.setState(()=>{
      return {
        inputValue: value
      }
    })
    //this.setState({
    //  inputValue: e.target.value
    //})
  }
  handleBtnClick() {
    this.setState((prevState)=>({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }),()=>{
      //cb

    });
  }
  handleItemDelete(index) {
    //state不允许直接改变，修改副本，然后覆盖
    //修改state中的东西时，使用setState
    this.setState(()=>{
      //复制list列表
      const list= [...this.state.list]
      //删除
      list.splice(index, 1);
      //覆盖
      return{
        list: list
      }
    })
  }
}
export default TodoList;